<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link href="/js/wangeditor/css/style.css" rel="stylesheet">
<style>

    .layui-upload-colse {
        position: relative;
    }

    .closeUpload {
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .upImg {
        width: 80px;
        height: 80px;
    }

    .formfixed {
        position: relative;
    }

    .remove {
        position: absolute;
        top: 125%;
        right: -175px;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .myheader {
        height: 140px;
        background-color: #FFFFFF;
        padding: 20px 0;
        display: flex;
        align-items: center;
        margin: 0;
        flex-wrap: wrap;
        width: 100%;
    }

    .layui-tab {

        overflow: auto;
        background-color: #FFFFFF;
        margin: 10px 0 0 0;
    }

    .layui-input-block1 {
        display: flex;
        align-items: center;
        justify-content: flex-start
    }

    .layui-tab-title {
        height: 40px !important;
    }

    .layui-tab-content {
        height: calc(100% - 40px);
        overflow: auto;
    }
	.myremove1{
		width: 70px;    height: 33px;
		display: flex;
		align-items: center;
	}


    .mybutton {
        background: #fff;
        height: 150px;
        width: 150px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #a9b7b7;
        border: 2px solid #a9b7b7;
        margin-right: 10px;
        padding: 10px;
    }

    .mybutton:hover {
        cursor: pointer;
    }
.layui-upload-list{
    display: flex;
    flex-wrap: wrap;
}

/*富文本*/
    #consumerNotice—wrapper,#remark—wrapper {
        border: 1px solid #ccc;
        z-index: 999; /* 按需定义 */
        height: 200px;
    }
    #toolbar-consumerNotice,#toolbar-remark{
        height: auto;
    }
    #editor-consumerNotice,#editor-remark{
        height: auto;
    }
</style>
<body>
<input id="inputType" th:value="${type}" style="display: none">
<input id="userId" th:value="${userId}" style="display: none">
<input id="startTimeOld" th:value="${myData?.startTime}" style="display: none">
<input id="endTimeOld" th:value="${myData?.endTime}" style="display: none">
<input id="consumerNotice" th:value="${myData?.consumerNotice}" style="display: none">
<input id="remark" th:value="${myData?.remark}" style="display: none">
<div class="layui-fluid mt2" style="background-color: #f0f2f5">
    <form class="layui-form" style="height: 100%;">
        <div class="layui-form-item myheader">
            <div class="layui-inline" style="width: calc((100% - 50px) / 4)">
                <label class="layui-form-label required">商品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="请输入"
                           th:value="${myData?.name}"
                           th:disabled="${type=='info'}"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline" style="width: calc((100% - 50px) / 4)">
                <label class="layui-form-label required">拼团人数</label>
                <div class="layui-input-block">
                    <input type="text" maxlength="11" name="peopleNum" lay-verify="peopleNum" autocomplete="off"
                           th:value="${myData?.peopleNum}"
                           th:disabled="${type=='info'}"
                           onkeyup="value=value.replace(/\D/g,'')"
                           placeholder="请输入拼团人数" class="layui-input">
                </div>
            </div>
            <div class="layui-inline" style="width: calc((100% - 50px) / 4)">
                <label class="layui-form-label required">有效期(月)</label>
                <div class="layui-input-block">
                    <input id="validTime" name="validTime" class="form-control validTime" type="text" placeholder="请输入有效期"
                           th:value="${myData?.validTime}"
                           th:disabled="${type=='info'}"
                           onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
<!--                        月-->
                </div>
            </div>
            <div class="layui-inline" style="width: calc((100% - 50px) / 4)" th:if="false">
                <label class="layui-form-label required">服务类型</label>
                <div class="layui-input-block">
                    <select  id="projectId" lay-search=""  name="projectId" lay-verify="projectId" lay-filter="demo-select-filter"
                             th:value="${myData?.projectId}">
                        <option value="">请等待数据加载</option>
                    </select>

                </div>
            </div>
        </div>
        <div class="layui-tab" lay-filter="test-hash"
             th:style="${type=='info'?'height:calc(100% - 350px)':'height:calc(100% - 254px)'}">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="11">基础信息</li>
                <li lay-id="22">商品规格</li>
                <li lay-id="33">图片信息</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width: calc((100% - 40px) / 3);">
                            <label class="layui-form-label required">倒计时(小时)</label>
                            <div class="layui-input-block">
                                <input id="countDown" name="countDown" class="form-control " type="text" placeholder="请输入拼团倒计时"
                                       th:value="${myData?.countDown}"
                                       th:disabled="${type=='info'}"
                                       onkeyup="value=value.replace(/\D/g, '')" >
                            </div>
                        </div>
                        <div class="layui-inline" style="width: calc((100% - 40px) / 3);">
                            <label class="layui-form-label required">开始时间</label>
                            <div class="layui-input-block">
                                <input id="startTime" name="startTime" class="form-control startTime" type="text"
                                       th:value="${type=='add'?'':#dates.format(myData?.startTime,'yyyy-MM-dd HH:mm:ss')}"
                                       th:disabled="${type=='info'}"
                                       placeholder="请输入拼团开始时间">
                            </div>
                        </div>
                        <div class="layui-inline" style="width: calc((100% - 40px) / 3);">
                            <label class="layui-form-label required">结束时间</label>
                            <div class="layui-input-block">
                                <input id="endTime" name="endTime" class="form-control endTime" type="text"
                                       th:value="${type=='add'?'':#dates.format(myData?.endTime,'yyyy-MM-dd HH:mm:ss')}"
                                       th:disabled="${type=='info'}"
                                       placeholder="请输入拼团结束时间">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width: calc((100% - 40px) / 3);">
                            <label class="layui-form-label required">服务保障</label>
                            <div class="layui-input-block">
                                <input class="form-control "
                                       th:disabled="${type=='info'}" th:value="${myData?.guarantee}" name="guarantee" type="text" placeholder="请输入服务保障">
                            </div>
                        </div>
                        <div class="layui-inline" style="width: calc((100% - 40px) / 3);">
                            <label class="layui-form-label">住宅面积</label>
                            <div class="layui-input-block">
                                <input class="form-control "
                                       th:disabled="${type=='info'}" th:value="${myData?.residentialArea}" name="residentialArea" type="text" placeholder="请输入住宅面积">
                            </div>
                        </div>
                        <div class="layui-inline" style="width: calc((100% - 40px) / 3);">
                            <label class="layui-form-label">列表优先级</label>
                            <div class="layui-input-block">
                                <input type="text" name="sort" lay-verify="detailedAddress" autocomplete="off"
                                       onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                                       th:value="${myData?.sort}"
                                       th:disabled="${type=='info'}"
                                       placeholder="请输入列表优先级" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width: calc((100% - 40px) / 3);">
                            <label class="layui-form-label">首页展示</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="isShow"
                                       th:checked="${myData?.isShow==1}"
                                       th:disabled="${type=='info'}"
                                       title="开|关" lay-skin="switch" lay-filter="switchTest">
                            </div>
                        </div>
                        <div class="layui-inline" style="width: calc((100% - 40px) / 3);">
                            <label class="layui-form-label">首页优先级</label>
                            <div class="layui-input-block">
                                <input type="text" id="homeSort" name="homeSort" lay-verify="detailedAddress"
                                       autocomplete="off"
                                       onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
                                       th:value="${myData?.homeSort}"
                                       th:disabled="${myData?.isShow==0||type=='info'||type=='add' }"
                                       placeholder="请先启用首页展示在输入首页优先级" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                            <label class="layui-form-label required">消费须知</label>
                            <div class="layui-input-block" id="consumerNotice—wrapper">
<!--                                <textarea  class="form-control "-->
<!--                                           id="consumerNotice"-->
<!--                                           th:disabled="${type=='info'}"th:value="${myData?.consumerNotice}" name="consumerNotice" type="text" placeholder="请输入消费须知">-->
<!--                                </textarea> -->
                                    <div id="toolbar-consumerNotice"><!-- 工具栏 --></div>
                                    <div id="editor-consumerNotice"><!-- 编辑器 --></div>

                            </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品详情</label>
                        <div class="layui-input-block" id="remark—wrapper">
<!--                            <textarea name="remark" placeholder="请输入商品详情" lay-verify="introduction"-->
<!--                                      th:disabled="${type=='info'}"-->
<!--                                      th:text="${myData?.remark}"-->
<!--                                      class="layui-textarea"></textarea>-->
                            <div id="toolbar-remark"><!-- 工具栏 --></div>
                            <div id="editor-remark"><!-- 编辑器 --></div>
                        </div>
                    </div>

                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item" id="LayuiItems">
<!--                        循环-->
                        <div class="layui-form-item" style="display: flex;"   th:each="item:${voList}">
                            <div class="layui-inline" style="width: calc((100% - 40px) / 4);">
                                <label class="layui-form-label required">商品规格</label>
                                <div class="layui-input-block">
                                    <input class="form-control "
                                           th:disabled="${type=='info'}" myid="one" th:value="${item.name}"  type="text" placeholder="请输入商品规格">
                                </div>
                            </div>
                            <div class="layui-inline " style="width: calc((100% - 40px) / 4);">
                                <label class="layui-form-label required">商品价格</label>
                                <div class="layui-input-block">
                                    <input class="form-control "
                                           th:disabled="${type=='info'}" myid="two"  th:value="${item.price}" type="text" placeholder="请输入商品价格" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                                </div>
                            </div>
                            <div class="layui-inline " style="width: calc((100% - 40px) / 4);">
                                <label class="layui-form-label required">团购价格</label>
                                <div class="layui-input-block">
                                    <input class="form-control "
                                           th:disabled="${type=='info'}" myid="three" th:value="${item.originalPrice}" type="text" placeholder="请输入团购价格" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                                </div>
                            </div>
                            <div class="layui-inline" style="width: calc((100% - 40px) / 4);">
                                <label class="layui-form-label required">拼团价格</label>
                                <div class="layui-input-block">
                                    <input class="form-control "
                                           th:disabled="${type=='info'}" myid="four" th:value="${item.groupPrice}" type="text" placeholder="请输入拼团价格" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                                    <input th:value="${item?.id}" myid="five" style="display: none">
                                </div>
                            </div>
							<button  class="layui-inline layui-btn myremove1" th:style="${type!='edit'?'visibility: hidden':''}" onclick="myRemoveLayui(this)" type="button">删除</button>
                        </div>
                    </div>
                    <div class="layui-form-item" style="display: flex;  justify-content: center; align-items: center;">
                        <button type="button" class="layui-btn" onclick="addLayuiItems()">添加</button>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">商品封面</label>
                        <div class="layui-upload-list" id="image">

                            <div class="layui-inline mybutton" style="padding: 0"
                                 th:each="item,imgStat:${images}"
                                 th:if="${type!='add'}">
                                <img class="upImg" th:src="${item}" style="height: 100%;width: 100%">
                                <img class="closeUpload" th:if="${type=='edit'}" th:data-index="${imgStat.index}" src="/img/close.png" data-id="report">
                            </div>

                            <button lay-data="{url: '/common/sysFile/upload',id:'image',number:6}" type="button" class="layui-btn uploadSend mybutton"
                                    th:if="${type!='info'}">
                                <i class="layui-icon" style="font-size: 70px;color: #a9b7b7;">&#xe67c;</i>请上传本地图片
                            </button>
                        </div>
                        <input type="hidden" th:if="type=='add'" name=" image" lay-verify="image">

                        <input type="hidden" th:if="type!='add'" th:value="${myData?.image}"
                               name="image" lay-verify="image">
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">商品图片</label>

                        <div class="layui-upload-list" id="picture">
                            <div class="layui-inline mybutton" style="padding: 0" th:if="${type!='add'}"
                                 th:each="pictureItem,iterStat : ${pictures}">
                                <img class="upImg" th:src="${pictureItem}" style="height: 100%;width: 100%">
                                <img class="closeUpload" th:data-index="${iterStat.index}" th:if="${type!='info'}" src="/img/close.png" data-id="picture">
                            </div>

                            <button lay-data="{url: '/common/sysFile/upload',id:'picture',number:3}" type="button" class="layui-btn uploadSend mybutton"
                                     th:if="${type!='info'}">
                                <i class="layui-icon" style="font-size: 70px;color: #a9b7b7;">&#xe67c;</i>请上传本地图片
                            </button>
                        </div>
                        <input type="hidden" th:if="type=='add'" name="picture" lay-verify="picture">
                        <input type="hidden" th:if="type!='add'" th:value="${myData?.picture}"
                               name="picture" lay-verify="picture">
                    </div>


                </div>
            </div>
        </div>
        <!--        </div>-->
        <div th:style="${type=='info'?'height: 145px;background-color: #FFFFFF;':'height: 50px;background-color: #FFFFFF;'}">
            <div class="layui-inline" style="width: calc(100% - 10px);" th:if="${type!='add'}">
                <label class="layui-form-label">审核结果</label>
                <div class="layui-input-block layui-input-block1"
                     th:if="${type=='edit'}"
                     th:text="${myData?.checkStatus==1?'已通过':(myData?.checkStatus==2?'未通过':'待审核')}">
                </div>
                <div th:if="${type=='info'}" class="layui-form">
                    <input type="radio" lay-filter="demo-radio-filter" name="checkStatus" value="1" title="通过"
                           th:checked="${myData?.checkStatus==1}">
                    <input type="radio" lay-filter="demo-radio-filter" name="checkStatus" value="2" title="拒绝"
                           th:checked="${myData?.checkStatus==2}">
                </div>
                <div class="layui-input-block" th:if="${type=='info'}"
                     th:style="${myData?.checkStatus==2?'display: block':'display: none'}"
                     id="refuseReason">
                            <textarea name="checkResult" placeholder="请输入拒绝原因" lay-verify="introduction"
                                      th:text="${myData?.checkResult}"
                                      class="layui-textarea"></textarea>
                </div>

            </div>
        </div>
        <div class="layui-form-item  layui-flow-more">
            <div class="layui-inline">
                <button type="button" class="layui-btn" lay-submit lay-filter="submit" th:text="${type=='add'?'立即提交':'确定'}">立即提交</button>
            </div>
        </div>

    </form>
</div>

<div th:include="include::footer"></div>
<script type="text/javascript" src="/js/xmSelect.js"></script>
<!--垃圾东西-->
<!--<script type="text/javascript" src="/js/lay/modules/layedit.js"></script>-->
<script src="/js/wangeditor/index.js"></script>
<script type="text/javascript" src="/js/webJs/jzweb/jazGroupProd/add.js"></script>
</body>
</html>